<template>
  <div class="swiperCom">
    <swiper
      :slides-per-view="1"
      autoplay
      :pagination="{ clickable: true }"
      class="swiper"
      :loop='true'
    >
      <swiper-slide
        v-for="item in imgs"
        :key="item.bannerId"
      >
        <img
          :src="item.pic"
          alt=""
        >
      </swiper-slide>
    </swiper>
  </div>

</template>

<script>
import SwiperCore, {Pagination,A11y,Autoplay} from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/vue'
import 'swiper/swiper.less';
import 'swiper/components/navigation/navigation.less';
import 'swiper/components/pagination/pagination.less';
SwiperCore.use([Pagination,A11y,Autoplay]);
import {getBanner} from '@/api';
  export default {
    data() {
      return {
        imgs:[]
      }
    },
    components:{
      Swiper,
      SwiperSlide
    },
    async created() {
      let result = await getBanner();
      this.imgs = result.data.banners;
    }
  }
</script>

<style lang="less" scoped>
.swiperCom {
  width: 7.5rem;
  .swiper {
    width: 7.1rem;
    height: 2.6rem;
    margin: 0 auto;
    border-radius: 0.1rem;
    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    ::v-deep .swiper-pagination-bullet {
      width: 10px;
      height: 1px;
      border-radius: 0;
      &.swiper-pagination-bullet-active {
        background-color: orangered;
      }
    }
  }
}
</style>